<template>
  <view>
    <view class="title">
      <div class="title-text">
        <text v-for="(v, i) in titles" :key="i" :class="i === titleIndex ? 'active': ''"
          @click="handleChangeTitleIndex(v,i)">{{ v }}</text>
      </div>
      <view class="title-right">
        <navigator url="../city/city">{{city}}</navigator>
        <text @click="show=true">筛选</text>
      </view>
    </view>
    <view class="content">
      <view v-show="type === '附近'">
        <map class="map"></map>
      </view>
      <view class="con">
        <list-item v-for="(v, i) in list" :key="i" :v="v" @click="toDetail(v)"></list-item>
      </view>
    </view>
    <view class="dialog" v-show="show">
      <view class="dialog-content">
        <view class="left">
          <text v-for="(v, ii) in leftTitles" :key="ii" :class="ii === dialogIndex ?'active': ''"
            @click="dialogIndex = ii">{{v}}</text>
        </view>
        <view class="right">
          <view v-show="dialogIndex === 0">
            暂无条件筛选
          </view>
          <view v-show="dialogIndex === 1">
            <button size="mini" :type="count === v ? 'primary': 'default'" @click="count=v" v-for="(v, i) in counts"
              :key="i">{{v}}</button>
          </view>
          <view v-show="dialogIndex === 2">
            <button size="mini" :type="price === v ? 'primary': 'default'" @click="price=v" v-for="(v, i) in prices"
              :key="i">{{v}}</button>
          </view>
          <view v-show="dialogIndex === 3">
            <button size="mini" :type="code === v.code ? 'primary': 'default'" @click="code=v.code" v-for="(v, i) in eductions"
              :key="i">{{v.name}}</button>
          </view>
        </view>
      </view>
      <view class="dialog-bottom">
        <button type="primary" @click="handleOk">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getList()
    },
    onShow() {
      this.city = uni.getStorageSync('city') || '北京'
    },
    data() {
      return {
        titles: ["推荐", "附近", "最新"],
        titleIndex: 0,
        list: [],
        type: '推荐',
        city: uni.getStorageSync('city') || '北京',
        show: false,
        leftTitles: ["时长", "人数", "工资", "学历"],
        dialogIndex: 0,
        // 条件查找
        counts: ["10-100", "100-200", "200-300", "300-400", "400-500", "10-500"],
        count: '',
        prices: ["5000-10000", "10000-15000", "15000-20000"],
        price: '',
        eductions: [{
          code: 0,
          name: '大专'
        }, {
          code: 1,
          name: '本科'
        }, {
          code: 2,
          name: '硕士'
        }, {
          code: 3,
          name: '博士'
        }, {
          code: 4,
          name: '不限'
        }],
        code: 0
      };
    },
    methods: {
      handleOk() {
        this.show = false;
        this.getList()
      },
      getList() {
        const data = {};
        if (this.type) data.type = this.type
        if (this.count) {
          const [num1, num2] = this.count.split('-')
          data.count_gte = num1
          data.count_lte = num2
        }
        if (this.price) {
          const [num1, num2] = this.price.split('-')
          data.price_gte = num1
          data.price_lte = num2
        }
        if(this.code && this.code !== 4) {
          data['education.code_gte'] = this.code
        }
        uni.request({
          url: 'http://localhost:3000/list',
          data: data
        }).then(resp => {
          this.list = resp.data
        })
      },
      toDetail(v) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + v.id
        })
      },
      handleChangeTitleIndex(v, i) {
        this.type = v;
        this.titleIndex = i;
        this.getList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .map {
    width: 100%;
    height: 200px;
  }

  .title {
    display: flex;
    align-items: center;
    height: 36px;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;

    .title-text,
    .title-right {
      display: flex;

      text {
        margin: 0 10px;

        &.active {
          color: red;
        }
      }
    }


  }

  .dialog {
    position: fixed;
    left: 0%;
    top: 0%;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    background-color: white;

    .dialog-content {
      height: 80vh;
      display: flex;

      .left {
        width: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;

        text {
          margin: 10px 0;

          &.active {
            color: red;
          }
        }

      }

      .right {}
    }
  }
</style>
